<template>
  <div class="tool-bar">
      <!-- tabal按钮，需要有一个数据源 ，通过这个数据源来驱动视图-->
      <div class="tool-bar-item" @click="onChangeFragment(item, index)"
      v-for="(item, index) in toolBarData" :key="index">
          <!-- 当当前 img 标签的 index === 选中的 tab 的 index 的时候img高亮 -->
          <img class="tool-bar-item-img" v-bind:src="[index === selectItemIndex ? item.hIcon : item.nIcon]" alt="item.name">
          <p class="tool-bar-item-name" v-bind:class="[index === selectItemIndex ? 'tool-bar-item-name-h' : '']">{{item.name}}</p>
      </div>
  </div>
</template>

<script>
/**
 * ToolBar 的功能
 * 1、永远位于页面的最底部
 * 2、点击toolbar 按钮时，页面发生相应切换
 * 3、按钮分为 默认 和 选中 两个状态
 * -----------------
 * 能力和约束
 * 1、不具备的能力（约束）
 * 2、通过一个回调，告诉父组件，按钮的点击事件
 * 3、当按钮被选中时，应该切换按钮的状态
*/
export default {
  data: function () {
    return {
      // tab按钮数据源 数据驱动
      toolBarData: [
        {
          // 默认状态下图片
          nIcon: require('@img/home-n.svg'),
          // 高亮状态下的图片
          hIcon: require('@img/home-h.svg'),
          // 名称
          name: '首页',
          // 组件名称
          componentName: 'home'
        },
        {
          // 默认状态下图片
          nIcon: require('@img/shopping-n.svg'),
          // 高亮状态下的图片
          hIcon: require('@img/shopping-h.svg'),
          // 名称
          name: '购物车',
          // 组件名称
          componentName: 'shopping'
        },
        {
          // 默认状态下图片
          nIcon: require('@img/my-n.svg'),
          // 高亮状态下的图片
          hIcon: require('@img/my-h.svg'),
          // 名称
          name: '我的',
          // 组件名称
          componentName: 'my'
        }
      ],
      // 选中tab按钮
      selectItemIndex: 0
    }
  },
  methods: {
    onChangeFragment: function (item, index) {
      this.selectItemIndex = index
      this.$emit('onChangeFragment', item.componentName)
    },
    /**
     * 指定切换的 tab 页
     */
    pushFragment: function (index) {
      // 调用 onChangeFragment 切换对应的 tab
      this.onChangeFragment(this.toolBarData[index], index)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
    .tool-bar {
        width: 100%;
        height: px2rem(46);
        display: flex;
        justify-content: space-around;
        background-color: white;
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.2);
        border-top: 1px solid $lineColor;

        &-item {
            text-align: center;
            padding: px2rem(4) px2rem(12);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            &-img {
                width: px2rem(22);
                height: px2rem(22);
            }

            &-name {
                font-size: $infoSize;
                margin-top: px2rem(4);

                &-h {
                    color: $mainColor;
                }
            }
        }
    }
</style>
